<template>
	<div class="bigBox">
		<div class="peggBox">
			<h2>超值充值包</h2>
			<div class="peggPack">
				<span class="peggItem" v-for="peggItem in package_list" @click="selePegg = peggItem">
					<span class="descBox">
						<p class="peggNum">{{ peggItem.pegg_num }} </p>
						<p>{{ peggItem.title }}</p>
						<img :src="getPublic('me/皮蛋@3x.png')" alt="">
					</span>
					<div class="btmBox">
						<span :class="selePegg.id == peggItem.id ? 'seleItem' : 'unSeleItem'"></span>
						<span class="price">
							<span class="consume">
								<p>￥</p>{{ (peggItem.price / 100) }}
							</span>
							<p>{{ (peggItem.orgin_price / 100) }}</p>
						</span>
					</div>
				</span>
			</div>
			<div class="agreeBox">
				<div class="agree">
					<input type="checkbox" v-model="agree" id="checkbox" />
					<label for="checkbox">我已阅读并同意《<a href="/html/皮蛋充值协议.html" target="_blank">皮蛋充值协议</a>》</label>
				</div>
				<button class="recharge" @click="goRecharge">
					￥{{ selePegg.price / 100 }} &nbsp;&nbsp;立即充值
				</button>
			</div>

		</div>
		<!-- 二维码 -->
		<el-dialog :close-on-click-modal="false" v-model="QRShow" title="请使用微信扫码支付" class="qrDialog">
			<template #default>
				<img :src="qrImg" alt="" srcset="">
				<div class="dialogBtn" v-show="showBtn">
					<p>若等待时间较长，可点击按钮</p>
					<button type="submit" @click="getPayStatus">刷新支付结果</button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, onBeforeUnmount } from "vue"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"
import $apiFun from "../../request/api";
import { getUid, getToken } from "../../hooks/auth";
import { getPublic } from "../../request/getPublic"; //获取静态资源
import QRCode from "qrcode";
const package_list = ref([]) as any//套餐列表
const agree = ref(true)//同意协议Flag
const selePegg = ref({}) as any //选择皮蛋套餐
const QRShow = ref(false)//二维码弹窗控制器
const qrImg = ref('')//二维码图片地址
const payId = ref('')//支付订单号
let TimeoutFlag = 0;
const showBtn = ref(false)
//定义要发送的emit事件
const emit = defineEmits(['openLogin'])

const router = useRouter()
const getImg = async (data) => {
	qrImg.value = await QRCode.toDataURL(data);
	QRShow.value = true
	setTimeout(() => {
		showBtn.value = true
	}, 5000);
}
//获取皮蛋列表
const getPeggList = () => {
	$apiFun.peggRechargeList().then((res: any) => {
		package_list.value = []
		if (res.code == 200) {
			res.data.forEach((element: any) => {
				if (element.recharge_type == 0) {
					package_list.value.push(element)
				}
			});
			selePegg.value = package_list.value[0]
			console.log(res)
		}
	})
}
//申请支付链接
const goRecharge = () => {
	let vpackObj = {
		consumeType: 57,
		uid: getUid(),
		id: selePegg.value.id,
		extra: JSON.stringify({ uid: getUid() }),
		channel: "ArtScapeAi"
	}
	const vpack = btoa(JSON.stringify(vpackObj))
	let params = {
		vpack,
		pay_way: 1, // 支付方式，1 微信，2 支付宝，目前仅支持微信
		product_id: 123123, // 目前多余，做备用字段
		auth_token: getToken(),
		uid: getUid()
	}

	$apiFun.thirdPay(params).then((res: any) => {
		if (res.code == 200) {
			console.log('thirdPay', res)
			getImg(res.data.returnCode)
			payId.value = res.data.prepayId
			getPayStatus()
		} else {
			ElMessage.error(res.msg)
		}
	})
}
//定时获取支付结果
const getPayStatus = () => {
	console.log("查询支付结果")
	clearTimeout(TimeoutFlag)
	TimeoutFlag = 0
	let params = {
		auth_token: getToken(),
		uid: getUid(),
		order_id: payId.value,
	}
	$apiFun.thirdQuery(params).then((res: any) => {
		if (res.code == 200) {
			if (res.data.status == 2) {
				ElMessage.success("恭喜您支付成功！")
				QRShow.value = false
				router.push({
					name: "account",
				});
			} else {
				TimeoutFlag = setTimeout(() => {
					getPayStatus()
				}, 1000);
			}
		}
	})
}

onBeforeUnmount(() => {
	clearTimeout(TimeoutFlag)
	TimeoutFlag = 0
})

onMounted(async () => {
	getPeggList()
})
</script>

<style scoped>
.dialogBtn p {}

.dialogBtn button {
	margin-top: 20px;
	cursor: pointer;
	width: 203px;
	height: 51px;
	border-radius: 218px;
	background: rgba(255, 226, 41, 1);
	border: 0px;
}

:deep(.qrDialog) {
	text-align: center;
}

:deep(.qrDialog img) {
	width: 300px;
}


.agreeBox {
	width: 100%;
	text-align: center;
}

.recharge {
	cursor: pointer;
	width: 203px;
	height: 51px;
	border-radius: 218px;
	background: rgba(255, 226, 41, 1);
	border: 0px;
}

.agree {
	color: #737a72;
	display: flex;
	align-items: center;
	font-size: 12px;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
}

.agree a {
	color: rgba(42, 130, 228, 1);
	text-decoration: none;
}

.agree input,
label {
	cursor: pointer;
}

.peggBox {
	width: 100%;
	height: 100%;
}

.peggPack {
	width: 100%;
	height: calc(100% - 200px);
	overflow-y: auto;
	padding-top: 20px;
	box-sizing: border-box;
}

h2 {
	font-size: 18px;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);

}

.price .consume p {
	text-decoration-line: unset;
	color: rgba(0, 0, 0, 1);
	margin: 0;
	padding: 0;
}

.price .consume {
	font-size: 24px;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
	margin: 0;
	padding: 0;
}

.price p {
	display: inline-block;
	font-size: 16px;
	font-weight: 300;
	text-decoration-line: line-through;
	color: rgba(128, 128, 128, 1);
}

.price {
	position: absolute;
	right: 26px;
}


.btmBox {
	position: absolute;
	height: 60px;
	width: 100%;
	bottom: 0;
}

.seleItem {
	position: absolute;
	display: inline-block;
	left: 20px;
	top: 6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: url("/src/assets/me/选择套餐.png") no-repeat;
	background-size: contain;
	background-position: center center;
}

.unSeleItem {
	position: absolute;
	left: 20px;
	top: 6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 1);
}

.descBox img {
	position: absolute;
	right: 0;
	top: 0;
	width: 46px;
}

.descBox .peggNum {
	position: relative;
	height: 48px;
	font-size: 36px;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
}

.descBox p {
	font-size: 16px;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
	text-align: left;
}

.descBox {
	position: relative;
	width: 100%;
	padding-left: 20px;
	box-sizing: border-box;
	display: inline-block;
	text-align: left;
	margin-top: 40px;
	text-align: center;
}

.peggItem {
	cursor: pointer;
	position: relative;
	display: inline-block;
	width: 180px;
	height: 200px;
	opacity: 1;
	border-radius: 20px;
	background: rgba(254, 197, 6, 1);
	border: 1px solid rgba(56, 56, 56, 1);
	box-shadow: 0px 2px 4px rgba(254, 197, 6, 0.37);
	text-align: center;
	box-sizing: border-box;
	padding: 0 10px;
	margin: 10px 30px;
}

.bigBox {
	width: 100%;
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
	padding: 20px 40px;
}
</style>
